<template>
    <div class="singer-intro">
      <div>
        <h2>简历</h2>
        <div>{{ desc }}</div>
      </div>
      <div>
        <div>
          <h2>基本资料</h2>
          <div>
              <div v-for="(item, index) in basicItem" :key="index">
                  <span>{{ item.key }}:</span>
                  <span style="white-space: pre-wrap">{{ item.value }}</span>
              </div>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in otherItem" :key="index">
          <h2>{{ item.key }}</h2>
          <div style="white-space: pre-wrap">{{ item.value }}</div>
      </div>
    </div>
  </template>
  <script>
  export default {
    props: ["singerId"], //propertys
    data() {
      return {
        desc: "", //简介描述
        basicItem: [], //基本资料
        otherItem: [], //其他(从艺历程和荣誉记录)
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        this.$request("get", "/singer/desc", {
          singermid: this.singerId,
        }).then((res) => {
          console.log(res);
          this.desc = res.data.desc
          this.basicItem = res.data.basic.item
          this.otherItem = res.data.other.item
        });
      },
    },
  };
  </script>
  <style scoped>
  .singer-intro {
    text-align: left;
    padding:0 1rem;
  }
  </style>